<template>
	<u-popup v-model="show" mode="center" border-radius="12" :mask-close-able="false">
		<view class="loginVue relative">
			<u-icon name="close" color="#fff" size="30" class="absolute" style="right: 40rpx; top: 40rpx;" @click="close"></u-icon>
			<view class="title">登录</view>
			<!-- 手机号 -->
			<view class="inpVue margin50">
				<view class="label">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="name" placeholder-style="color: rgba(255,255,255,0.5)"/>
			</view>
			
			<!-- 验证码 -->
			<view class="inpVue margin50">
				<view class="label">验证码</view>
				<view class="flex align-center">
					<input type="number" placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.5)"/>
					<view class="btn" :class="{btnActive: $u.test.mobile(name)}" @click="sendCode()">{{ text }}</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="loginBtn margin60" :class="{loginActive: $u.test.mobile(name) && code}" @click="loginFun()">登录</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				name: "",
				code: "",
				text: '获取验证码',
				isSend: false,
			}
		},
		methods: {
			close(){
				this.name = ""
				this.code = ""
				this.$store.state.show = false
			},
			async loginFun(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (!this.code) return this.$u.toast("请输入验证码")
				uni.showLoading()
				const res = await this.$request("/aiet-user-center/user/codeLogin", {
					phone: this.name,
					code: this.code
				})
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('登录成功');
					this.$store.dispatch("getUser")
					this.$store.state.isLogin = true
					this.$store.state.show = false  
					this.$emit('callBack')
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
				}
			},
			async sendCode(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (this.isSend) return
				this.isSend = true;
				uni.showLoading()
				const res = await this.$request('/aiet-user-center/user/sendCode', {
					phone: this.name,
				});
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('发送成功');
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
					this.isSend = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.loginVue {
		width: 690rpx;
		background: linear-gradient(to bottom, #48D685, #3C87EF);
		position: relative;
		border-radius: 12rpx;
		padding:  80rpx 40rpx 100rpx;
		.title {
			font-weight: 600;
			color: #fff;
			font-size: 34rpx;
			text-align: center;
		}
		.inpVue {
			width: 100%;
			.label {
				font-size: 26rpx;
				color: rgba(255,255,255,0.8);
			}
			input {
				flex: 1;
				height: 100rpx;
				margin-top: 18rpx;
				border: 1rpx solid rgba(255,255,255,.5);
				border-radius: 12rpx;
				font-size: 30rpx;
				padding-left: 20rpx;
				display: block;
				color: #fff;
			}
			.btn {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				margin-top: 18rpx;
				margin-left: 20rpx;
				border-radius: 12rpx;
				background: #f5f5f5;
				color: #333;
			}
			.btnActive {
				background: linear-gradient(to right, #EAB108, #F87415);
				color: #fff;
			}
		}
		.loginBtn {
			width: 100%;
			height: 88rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			color: #333;
		}
		.loginActive {
			background: linear-gradient(to right, #EAB108, #F87415);
			color: #fff;
		}
	}
</style>